/* ReadingList Version 1.00 - Updated 2009-11-23           */
/* Keep a list of web sites of interest for later reading  */

const APPNAME   ="ReadingList";
const APPICON16 ="http://mylittlehacks.appspot.com/img/reading16.icon.png";
const APPICON32 ="http://mylittlehacks.appspot.com/img/reading32.icon.png";
const CLOSEICON1="http://mylittlehacks.appspot.com/img/close.icon.png";
const CLOSEICON2="http://mylittlehacks.appspot.com/img/closeon.icon.png";


/* STORAGE */
jetpack.future.import("storage.simple");
var db=jetpack.storage.simple;
if(!db.links){ db.set("links",[],function(key,val){}); db.links=[]; }

/* STATUSBAR */
jetpack.statusBar.append({
  html   : "<img src='"+APPICON16+"'/>",
  onReady: initstatusbar
})

/* SLIDEBAR */
var slidebody;
jetpack.future.import("slideBar");
jetpack.slideBar.append({
  width   : 320,
  icon    : APPICON32,
  onReady : initslide,
  html    : <>
    <style><![CDATA[
      body{background:white;}
      h2{}
      a{color:#005FCF; text-decoration:none;}
      a:hover{color:#FF833F; text-decoration:none;}
      #list{background:white; margin:0; padding:0; font:normal 0.8em helvetica,arial;}
      .item{border-bottom:1px solid #E5E5E5; padding:4px 0;}
      .item .title{font-weight:bold;}
      .item .date {float:right; font-size:0.8em;}
      .item .link {color:gray; font-size:0.8em;}
      .item .del  {float:right; width:16px; height:16px; outline:none; background-image:url('http://mylittlehacks.appspot.com/img/close.icon.png');}
      .item .del:hover{background-image:url('http://mylittlehacks.appspot.com/img/closeon.icon.png');}
    ]]></style>
    <body>
    <h2><img src={APPICON16} />Reading List</h2>
    <div id='list'></div>
    </body>
  </>
});

function initstatusbar(widget){ 
  $(widget).click(marktoread);
}

function initslide(slide){
  slidebody = slide.contentDocument.body;
  readinglist(slide);
}

function readinglist(slide){ 
  var i,item,link;
  if(db.links.length<1){ nothing(); }
  else{
    for(i in db.links){
      item  = db.links[i];
      link  = JSON.parse(item);
      showitem(link);
    }
  }
}

function marktoread(){ 
  if(db.links.length<1){ $(".noitems",slidebody).remove(); }
  link = getlinkinfo();
  if(islinked(link.url)){
    notify("Page already in your reading list");
  }
  else{
    db.links.push(JSON.stringify(link));
    db.sync();
    item = showitem(link);
    notify("Page added to your reading list in your slidebar");
  }
}

function getlinkinfo(){
  var win,doc,url,title,date;
  url   = jetpack.tabs.focused.contentWindow.location.href;
  title = jetpack.tabs.focused.contentDocument.title;
  date  = (new Date()).getTime();
  info  = {url:url,title:title,date:date,read:0};
  return info;
}

function showitem(link){
  var html,div,title,date,url;
  date = (new Date(link.date)).toDateString().substr(4,6);
  title= ellipsis(link.title,30);
  url  = ellipsis(link.url,44);
  html = <div class="item" key={link.date} >
           <div class="date" >{date} </div>
           <div class="title"><a href={link.url} target="_blank">{title}</a></div>
           <div class="link" >{url}  <a class="del" href="javascript:void(0)" link={link.url} /></div>
         </div>.toXMLString();
  div = $(html,slidebody);
  div.find(".del").click(function(){removelink($(this).attr("link"));});
  div.appendTo($("#list",slidebody));
}

function removelink(url){
  var i,link;
  for(i in db.links){ 
    link = JSON.parse(db.links[i]);
    if(link.url==url){
      $("div[key='"+link.date+"']",slidebody)
        .css({'background':'lightgrey','-moz-opacity':'0.6'})
        .slideUp("normal",function(){$(this).remove();});
      db.links.splice(i,1); 
      db.sync();
      break; 
    }
  }
}

function islinked(url){
  var i,link,ok;
  ok=false;
  for(i in db.links){ 
    link = JSON.parse(db.links[i]);
    if(link.url==url){ ok=true; break; }
  }
  return ok;
}

function nothing(){
  var div;
  div = $("<div class='noitems'/>",slidebody);
  div.html("<h3>Nothing to read</h3>");
  div.appendTo($("#list",slidebody));
}

function notify(message){
  jetpack.notifications.show({ title:APPNAME, body:message, icon:APPICON16 });
}

function ellipsis(text,max){
  text=trim(text);
  if(text.length>max){ text=text.substr(0,max)+"..."; }
  return text;
}

function trim(text){ return text.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); }

/* END */